/*
 * @Author: sonss
 * @Date: 2024-09-03 20:29:19
 * @LastEditTime: 2024-09-03 22:25:07
 * @FilePath: /ss-file-antd/src/pages/Assets/Share/modules/Success.tsx
 * @Description:  分享链接成功
 */
import { ProDescriptions } from '@ant-design/pro-components';
import { Button, Divider, Input, message, Modal } from 'antd';
import moment from 'moment';
import { CopyToClipboard } from 'react-copy-to-clipboard';

type SuccessModuleProps = {
  record?: ASSETS.SHARE.CreateResponse;
  onCancel?: () => void;
  onOk?: () => void;
};

const SuccessModule: React.FC<SuccessModuleProps> = (props) => {
  const [messageApi, contextHolder] = message.useMessage();
  const noop = () => {};
  const { record = {}, onOk = noop, onCancel = noop } = props;

  const handleCopySuccess = () => {
    messageApi.success('已成功复制！');
  };

  return (
    <>
      <Modal title="创建分享链接成功" open={true} onOk={onOk} onCancel={onCancel} footer={false}>
        <ProDescriptions layout="vertical" column={1}>
          <ProDescriptions.Item label="分享码">
            <Input value={record.orderNo} readOnly style={{width: 320}} />
          </ProDescriptions.Item>
          <ProDescriptions.Item label="提取码">
            <Input value={record.shapwd} readOnly style={{ width: 120 }} />
          </ProDescriptions.Item>
          {record.expiredTime && record.expiredTime > 0 && (
            <ProDescriptions.Item label="有效期">
            <Input value={moment(record.expiredTime * 1000).format('YY/MM/DD HH:mm:ss')} readOnly style={{ width: 200 }} />
          </ProDescriptions.Item>
          )}
        </ProDescriptions>
        <div>
          <Divider />
        </div>
        <div>
          <CopyToClipboard
            text={`分享码: ${record.orderNo} 提取码: ${record.shapwd} `}
            onCopy={handleCopySuccess}
          >
            <Button type="primary">复制</Button>
          </CopyToClipboard>
        </div>
      </Modal>
      {contextHolder}
    </>
  );
};

export default SuccessModule;
